<script lang="ts" setup>
import { onMounted, ref,toRaw ,onBeforeMount} from 'vue';
import { useUserStore } from '@/stores';
import localforage from 'localforage'
import {MutationType} from 'pinia'
const userStore = useUserStore()
const queryRoot = ref<HTMLElement | null>(null)
onMounted(() => {
  if (navigator.userAgent.includes('Android') || navigator.userAgent.includes('iPhone')) {
    //手机
    queryRoot.value?.style.setProperty('--content-width', '90%')
  } else {
    queryRoot.value?.style.setProperty('--content-width', '50%')
  }
  if (innerWidth > 1200) {
    queryRoot.value?.classList.add('large')
  }
})
onBeforeMount(() => {
  userStore.initStore()
  userStore.$subscribe((mutation, state) => {
    if(mutation.type !== MutationType.patchObject){
      localforage.setItem('user', toRaw(state), (err) => {
      if(err){
        console.log('存储失败：',err)
      }
    })
    }
  })
})
</script>
<template>
  <div class="container" ref="queryRoot">
    <router-view v-slot="{ Component }">
      <keep-alive >
        <component :is="Component" />
      </keep-alive>
    </router-view>
    
  </div>
</template>
<style lang="less" scoped>
.container {
  width: 100vw;
  height: 100vh;
  background-image: url('@/assets/query/BJ.png');
  background-size: 100% 100%;

  &.large {
    background-image: url('@/assets/query/BJ-large.png') !important;
  }

}
</style>